<template>
	<div class="home-screen-module7">
		<div class="item">
			<div class="item-line">
				<div class="item-complete" :style="{width:outRate}"></div>
				<div class="item-text1">出库单</div>
				<div class="item-text2">{{outRate}}</div>
				<div class="item-text3">共<span class="num">{{dataSource.warehousingSum}}</span>件</div>
			</div>
		</div>
		<div class="item">
			<div class="item-line">
				<div class="item-complete" :style="{width:inRate}"></div>
				<div class="item-text1">入库单</div>
				<div class="item-text2">{{inRate}}</div>
				<div class="item-text3">共<span class="num">{{dataSource.issueSum}}</span>件</div>
			</div>
		</div>
		<div class="item">
			<div class="item-line">
				<div class="item-complete" :style="{width:checkRate}"></div>
				<div class="item-text1">盘点单</div>
				<div class="item-text2">{{checkRate}}</div>
				<div class="item-text3">共<span class="num">{{dataSource.inventorySum}}</span>件</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { toRefs, computed, ref } from 'vue'	
	
const props = defineProps({
	dataSource:{
		type:Object,
		default:function(){
			return {
				issueSum:0,
				issueImplement:0,
				warehousingSum:0,
				warehousingImplement:0,
				inventorySum:0,
				inventoryImplement:0
			}
		}
	}
})
const {dataSource} = toRefs(props)

const inRate = computed(()=>{
	let res = '0%';
	let sum = Number(dataSource.value.issueSum);
	let cpNum = Number(dataSource.value.issueImplement);
	if (!isNaN(sum) && !isNaN(cpNum) && sum!==0) {
		res = Number(((cpNum/sum)*100).toFixed(2))+'%'
	}
	return res;
})

const outRate = computed(()=>{
	let res = '0%';
	let sum = Number(dataSource.value.warehousingSum);
	let cpNum = Number(dataSource.value.warehousingImplement);
	if (!isNaN(sum) && !isNaN(cpNum) && sum!==0) {
		res = Number(((cpNum/sum)*100).toFixed(2))+'%'
	}
	return res;
})

const checkRate = computed(()=>{
	let res = '0%';
	let sum = Number(dataSource.value.inventorySum);
	let cpNum = Number(dataSource.value.inventoryImplement);
	if (!isNaN(sum) && !isNaN(cpNum) && sum!==0) {
		res = Number(((cpNum/sum)*100).toFixed(2))+'%'
	}
	return res;
})
</script>

<style lang="scss" scoped>
.home-screen-module7{
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: .1em 0;
	box-sizing: border-box;
	&>.item{
		height: 1px;
		flex-grow: 1;
		display: flex;
		align-items: center;
		overflow: hidden;
		.item-line{
			$showClor:#f5fffa;
			$completeClor:#66cdaa;
			height: .15em;
			width: 100%;
			background-color: $showClor;
			color: $showClor;
			position: relative;
			.item-complete{
				position: absolute;
				height: 100%;
				top: 0;
				left: 0;
				background-color: $completeClor;
			}
			.item-text1,.item-text2,.item-text3{
				position: absolute;
				z-index: 2;
				font-size: .18em;
			}
			.item-text1,.item-text2{
				left: 0;
			}
			.item-text1,.item-text3{
				top:-1.3em;
			}
			.item-text2{
				bottom:-1.3em;
			}
			.item-text3{
				right:0;
				.num{
					color: #ff4500;
					padding: 0 .2em;
				}
			}
		}
	}
}
</style>